<template>
	<!--  -->
	<view class="print-the-flow-sheet-container" v-if="transorderEntry && transorderEntry.transOrderId">
		<view class="qrcode-view">
			<image v-if="transorderEntry.barCodeUrl" style="width: 375rpx;height: 375rpx;" :src="transorderEntry.barCodeUrl"></image>
			<text class="order-txt">{{ transorderEntry.transOrderCode }}</text>
		</view>
		<uni-card spacing="0" padding="10">
			<view class="info-view">
				<text class="info-lable">生产工单号：</text>
				<text class="info-value">{{ transorderEntry.workorderCode }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">产品编码：</text>
				<text class="info-value">{{ transorderEntry.itemCode }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">产品名称：</text>
				<text class="info-value">{{ transorderEntry.itemName }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">单位：</text>
				<text class="info-value">{{ transorderEntry.unitOfMeasure }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">批次号：</text>
				<text class="info-value">{{ transorderEntry.batchCode || '' }}</text>
			</view>
		</uni-card>
		<uni-card spacing="0" padding="10">
			<view class="info-view">
				<text class="info-lable">流转数量：</text>
				<input class="info-value quantity-input" type="number" v-model="transorderEntry.quantityTransfered" />
			</view>
			<view class="info-view">
				<text class="info-lable">流转工序：</text>
				<text class="info-value">{{ transorderEntry.processName }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">流转时间：</text>
				<text class="info-value">{{ transorderEntry.createTime }}</text>
			</view>
		</uni-card>
		<view class="submit-btn" @click="submitEvent">保存</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			transorderEntry: {
				quantityTransfered: ''
			}
		};
	},

	onLoad() {
		if (!this.vuex_currentTask) {
			return;
		}
		this.getTransordereEntry();
	},
	methods: {
		getTransordereEntry() {
			uni.showLoading({
				title: '加载中...',
				icon: 'none'
			});

			this.$u.api.transorder
				.transorder({
					taskId: this.vuex_currentTask.taskId
				})
				.then(res => {
					if (res.code == 403) {
						uni.showToast({
							title: '您当前没有权限',
							icon: 'error',
							duration: 2000
						});
						return;
					}
					uni.hideLoading();
					this.transorderEntry = Object.assign(res?.data || {}, this.transorderEntry);
				})
				.catch(err => {
					uni.hideLoading();
				});
		},
		submitEvent() {
			if (!this.transorderEntry.transOrderId) {
				uni.showToast({
					title: '参数有误，无法提交',
					icon: 'none'
				});
				return;
			}
			if (this.transorderEntry.quantityTransfered == '') {
				uni.showToast({
					title: '请输入流转数量',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: '加载中...',
				icon: 'none'
			});

			this.$u.api.transorder
				.putTransorder(this.transorderEntry)
				.then(res => {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
					uni.hideLoading();
				})
				.catch(err => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss">
.print-the-flow-sheet-container {
	padding-bottom: 50rpx;
	.submit-btn {
		background-color: #1296db;
		color: #fff;
		font-size: 28rpx;
		line-height: 80rpx;
		margin: 0 50rpx;
		text-align: center;
		border-radius: 100rpx;
	}
	.qrcode-view {
		margin: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.order-txt {
		font-size: 30rpx;
		color: #333333;
		line-height: 80rpx;
	}
	.info-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 60rpx;
		.info-lable {
			font-size: 28rpx;
			color: #333333;
		}
		.info-value {
			font-size: 28rpx;
			color: #9a9a9a;
			&.quantity-input {
				padding-left: 30rpx;
				flex: 1;
				text-align: right;
				border: none;
			}
		}
		.uni-input {
			flex: 1;
			margin-left: 15rpx;
			font-size: 28rpx;
			color: #333333;
			border-bottom: 1px solid #9a9a9a;
		}
	}
}
</style>
